<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/base-admin-template.xhtml">
	
	<!-- Se pone el link de los vehiculos en estado activo -->
<!-- 	          	 <ui:insert name="link_usuarios"><li class="active"><a href="#{request.contextPath}/pages/gestionDeUsuarios/gestion_de_usuarios.xhtml">Gestión de usuarios</a></li></ui:insert>
 -->
 
           	<ui:define name="link_hacerReserva"><li class="active"><a href="#{request.contextPath}/pages/gestionDeReservasAlquiler/hacer_reserva.xhtml">Hacer reserva</a></li></ui:define>
 


		<!-- Aqui se define el contenido para esta pantalla -->
	
	<ui:define name="main">
	
	 <h1 class="page-header">Hacer reserva</h1>
	 
	 <p>Rellene los siguientes campos para hacer la reserva, los vehículos disponibles se mostrarán en la tabla
	 inferior. Posteriormente seleccione un vehículo para hacer la reserva</p>
	 
	 <h:form id="form_crear_reserva">
			
				<p:messages id="msgs"  />
				
				<!-- style="margin-bottom:10px" -->
		
		        <h:panelGrid columns="2" style="margin-bottom:10px"  cellspacing="100">    
		   
		       
		         <p:outputLabel  value="Tipo de búsqueda : " />
		      	 <p:selectOneMenu id="select_tipo_busqueda" value="#{hacerReservaBean.tipoBusqueda}" effect="fade" >
			            <f:selectItems value="#{hacerReservaBean.tiposBusqueda}" /> 
			             <p:ajax update="msgs,form_crear_reserva" event="valueChange"  listener="#{hacerReservaBean.cambiarForm}" />
			     </p:selectOneMenu>
			     
			    <p:outputLabel   value="Fabricante: " />
		         <p:selectOneMenu value="#{hacerReservaBean.fabricanteSeleccionado}" effect="fade" >
		            <f:selectItem itemLabel="Indiferente" itemValue="" />
		            <f:selectItems value="#{hacerReservaBean.fabricantesString}" />
		            <p:ajax update="msgs,combo_Modelos,:form_crear_reserva:tabla_vehiculos" event="valueChange"  listener="#{hacerReservaBean.filtrarVehiculos}" />
		         </p:selectOneMenu>
			     
			     <!-- Esto solo se dibuja si el tipo de busqueda es por modelo -->
		         <p:outputLabel rendered="#{hacerReservaBean.busqueda_modelo}"  value="Modelo: " />
		         <p:selectOneMenu rendered="#{hacerReservaBean.busqueda_modelo}" id="combo_Modelos" value="#{hacerReservaBean.modeloSeleccionadoString}" >
		          		
		          		<f:selectItem itemLabel="Selecciona un modelo" itemValue="" noSelectionOption="true" />
		                <f:selectItems value="#{hacerReservaBean.modelosString}" />
		                <p:ajax update="msgs,form_crear_reserva" event="valueChange"  listener="#{hacerReservaBean.filtrarVehiculos}" />
		                
		                 
		         </p:selectOneMenu>
		         
		         
		     	<!-- Esto solo se dibuja si el tipo de busqueda por características -->
				 <p:outputLabel rendered="#{hacerReservaBean.busqueda_caracteristicas}"  value="Precio máximo: " />
		 		 <p:inputText  rendered="#{hacerReservaBean.busqueda_caracteristicas}" id="input_max_precio" value="#{hacerReservaBean.costeMaximo}" >
		 		 	<p:ajax update="msgs,form_crear_reserva" event="keyup"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
		 		 </p:inputText>
		 		 
		 		 <p:outputLabel rendered="#{hacerReservaBean.busqueda_caracteristicas}"  value="Precio mínimo: " />
		 		 <p:inputText  rendered="#{hacerReservaBean.busqueda_caracteristicas}" id="input_min_precio" value="#{hacerReservaBean.costeMinimo}" >
		 		 	<p:ajax update="msgs,form_crear_reserva" event="keyup"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
		 		 </p:inputText>
		 		 
		 		 <p:outputLabel rendered="#{hacerReservaBean.busqueda_caracteristicas}"  value="Con gps: " />
		         <p:selectBooleanButton rendered="#{hacerReservaBean.busqueda_caracteristicas}" id="input_gps" value="#{hacerReservaBean.gps}" onLabel="Sí" offLabel="Me da igual" onIcon="ui-icon-check" offIcon="ui-icon-close" style="width:60px">
         				<p:ajax update="msgs,form_crear_reserva"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
   				</p:selectBooleanButton>
   				
   				<p:outputLabel rendered="#{hacerReservaBean.busqueda_caracteristicas}"  value="Puertas " />
		 		 <p:inputText  rendered="#{hacerReservaBean.busqueda_caracteristicas}" id="input_puertas" value="#{hacerReservaBean.puertas}" >
		 		 	<p:ajax update="msgs,form_crear_reserva" event="keyup"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
		 		 </p:inputText>
		 		 
		 		
				      	 
				 <p:outputLabel rendered="true"   value="Fecha Inicio: " />	    
			     <p:calendar id="busqueda_reserva_ini_calendar" value="#{hacerReservaBean.fechaInicio}" locale="es" navigator="true" pattern="dd-MM-yyyy" >
			     	<p:ajax update="msgs,form_crear_reserva" event="dateSelect"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
			     </p:calendar>
		      	 
		      	 <p:outputLabel rendered="true"   value="Fecha Fin: " />	    
			     <p:calendar id="busqueda_reserva_fin_calendar" value="#{hacerReservaBean.fechaFin}" locale="es" navigator="true" pattern="dd-MM-yyyy" >
		          <p:ajax update="msgs,form_crear_reserva" event="dateSelect"  listener="#{hacerReservaBean.filtrarVehiculos}"/>
			     </p:calendar>  
		      	 
		      	</h:panelGrid>
		        
		
		
		<!-- aquí la tabla de los resultados de la búsqueda anterior --> 
		
		  <p:dataTable id="tabla_vehiculos" var="vehiculo" value="#{hacerReservaBean.vehiculos_filtrados}" selectionMode="single" selection="#{hacerReservaBean.vehiculo_seleccionado}" rowKey="#{vehiculo.idvehiculo}">
        <f:facet name="header">
            Select Events
        </f:facet>
        <p:ajax event="rowSelect" listener="#{hacerReservaBean.onElegirVehiculo}" update=":form_crear_reserva:display" oncomplete="carDialog.show()" />
        <p:ajax event="rowUnselect" listener="#{hacerReservaBean.onDesElegirVehiculo}" update="" />
            <p:column headerText="Matricula" sortBy="matricula"  id="matricula">
            <h:outputText value="#{vehiculo.matricula}" />
        </p:column>
 
 
        <p:column headerText="Modelo" sortBy="modelo.nombre"  id="modelo">
            <h:outputText value="#{vehiculo.modelo.nombre}" />
        </p:column>
 
 
        <p:column headerText="Marca" sortBy="modelo.fabricante.nombre"  id="marca">
             <h:outputText value="#{vehiculo.modelo.fabricante.nombre}" />
        </p:column>
        </p:dataTable>
		
		
		
		<p:dialog header="Reservar vehículo" widgetVar="carDialog" resizable="false"
              width="300" showEffect="explode" hideEffect="explode">
 		
 			<p:messages id="msgs_dialog"  />
 
        <h:panelGrid id="display" columns="2" cellpadding="4"> 
 
 			<f:facet name="header">
                <p:graphicImage width="200" height="100" value="/img/cars/#{hacerReservaBean.vehiculo_seleccionado.rutaImagen}.jpg"/>
            </f:facet>
            
            
 
 			 <h:outputText value="---" />
  			 <h:outputText value="---" />
 
            <h:outputText value="Modelo:" />
            <h:outputText value="#{hacerReservaBean.vehiculo_seleccionado.modelo.nombre}" id="dis_modelo_nombre"/>
            
            <h:outputText value="Matricula:" />
            <h:outputText value="#{hacerReservaBean.vehiculo_seleccionado.matricula}" id="dis_matricula"/>
            
            <h:outputText value="Fecha inicio:" />
            <h:outputText value="#{hacerReservaBean.fechaInicio}" id="dis_fecha_ini"/>
 
            <h:outputText value="Fecha fin:" />
            <h:outputText value="#{hacerReservaBean.fechaFin}" id="dis_fecha_fin"/>
            
            <h:outputText value="Introduce tu id de usuario:" />
            <h:inputText value="#{hacerReservaBean.idUsuario}" id="dis_is_usuario"/>
            
            <p:commandButton value="Reservar" update="msgs_dialog" actionListener="#{hacerReservaBean.efectuarReserva}"/>
 

            
            
        </h:panelGrid>
    </p:dialog>
		
		                 
		</h:form>
	
	
	
	
	
	</ui:define>

</ui:composition>
</html>